<template>
    <div class="createPost-container">
        <el-form ref="carouselForm" :model="carouselForm" :rules="rules" class="form-container">

            <div class="createPost-main-container">
                <el-form-item label="轮播图" label-width="80px">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :action="uploadCarouselAction"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :data="restData"
                        :on-success="uploadSuccess"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <span slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件，建议尺寸为3200px*1600px 建议文件大小为3M以内</span>
                    </el-upload>
                </el-form-item>

                <el-form-item label="链接类型" label-width="80px">
                    <el-radio-group v-model="carouselForm.type">
                        <el-radio :label="1">视频</el-radio>
                        <el-radio :label="2">页面链接</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="视频上传" label-width="80px" v-if="carouselForm.type == 1 ? true : false">
                    <el-upload
                    class="upload-demo2"
                    :action="uploadAction"
                    :on-preview="handlePreview2"
                    :on-remove="handleRemove2"
                    :on-success="uploadSuccess2"
                    multiple
                    :limit="1"
                    :file-list="fileList2">
                        <el-button size="small" type="primary">上传视频</el-button>
                        <span slot="tip" class="el-upload__tip">只能上传MP4文件，且不超过20M</span>
                    </el-upload>
                </el-form-item>

                <el-form-item label="页面链接" label-width="80px" v-if="carouselForm.type == 2 ? true : false">
                    <el-input v-model="restData.link" placeholder="请输入链接地址"></el-input>
                </el-form-item>

                <el-form-item label-width="80px">
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传轮播</el-button>
                </el-form-item>
            </div>

        </el-form>
    </div>
</template>

<script>
import { carouselCreate } from '@/api/carousel'
import Upload from "@/components/Upload/SingleImage";

export default {
    data(){
        return {
            loading: false,
            uploadCarouselAction: process.env.VUE_APP_UPLOAD_BASE_URL + 'api/v1/banner/upload',
            uploadAction: process.env.VUE_APP_UPLOAD_BASE_URL + 'api/v1/file/upload',
            fileList: [],
            fileList2: [],
            restData: {
                link: ''
            },
            carouselForm:{
                type: 1
            },
            rules: {},
        }
    },
    components: { Upload },
    created(){

    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        uploadSuccess(response, file, fileList){
            if (response.success == true)
            {
                this.$notify({
                  title: '成功',
                  message: '上传轮播图成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.go(-1);
            }
            else
            {
                this.$notify({
                  title: '失败',
                  message: '上传轮播图失败',
                  type: 'error',
                  duration: 2000
                })
            }
        },
        handleRemove2(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview2(file) {
            console.log(file);
        },
        uploadSuccess2(response, file, fileList) {
            if (response.success == true){
                this.restData.link = process.env.VUE_APP_FRONTEN_BASE_URL + 'videoDetail?link='+encodeURIComponent(response.data.path);
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

.el-upload__tip{
    font-size:14px;
    margin-left: 20px;
}
</style>